<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜本地缓存版</title>
    <link rel="stylesheet" href="./index.css" />
   
  </head>

  <body>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>主页</li>
        <li>排行榜</li>
        <li>联系方式</li>
      </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
      <!-- 登陆按钮 -->
      <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
      </main>
    </div>
    

    <script>
       //获取五个按钮
       var add_btn = document.querySelector("#add-user");
      var double_btn = document.querySelector("#double");
      var query_btn = document.querySelector("#show-millionaire");
      var most_btn = document.querySelector("#sort");
      var total_btn = document.querySelector("#calculate");

     
        //获取右边展示用的盒子
        var main = document.querySelector("#main");
        //建一个空数组承接请求回来的数据
        var data = [];
        //发送请求获取数据
           const xhr = new XMLHttpRequest();
           xhr.open("GET","http://localhost:3000/dataInfo");
           xhr.send();
           xhr.onload = function(){
           if(xhr.status === 200){
            localStorage.setItem("dataInfo",xhr.responseText);  //请求成功后 系统响应回来的数据放到浏览器内存中
          }
        }
     
        data = localStorage.getItem("dataInfo");  //从浏览器内存获取数据
        data = JSON.parse(data);  //把JSON字符串转换数据为js对象
        console.log(data);

        //添加按钮---点击添加数据
        var arr = [];
        var num = 0;
        add_btn.addEventListener('click',addfn); //添加按钮点击事件，函数
        function addfn(){
          arr.push(data[num]);
          num++;
          updateDom(arr);
        }

        function updateDom(arr){
          main.innerHTML = ` 
          <h2>
          <strong>Person</strong>
          <span>Wealth</span>
         </h2>
          `;  //这里是让每次点击添加按钮 把之前展示的数据清空，重新展示

          arr.forEach(function(item,index){
          var div = document.createElement("div");
          div.classList.add("person");  //给新建的div增加一个类名--person   add是添加的语法
          div.innerHTML = `
          <strong>${item.name}</strong>
          <span>${formatMoney(item.money)}</span>
          `;
          main.appendChild(div);

        });
        }

        //翻倍
        double_btn.addEventListener("click",doublefn);  //点击翻倍按钮，函数
        function doublefn(){
          arr = arr.map(function(item){   //map映射数组，如果不写arr= 就是返回新数组，我们需要改原数组
            return {...item,money:item.money*2};   //返回数组里面的金额*2的数据
          });
          updateDom(arr); //重新渲染数组
        }

        //查询
        query_btn.addEventListener("click",queryfn); //点击查询按钮，函数
        function queryfn(){
          arr = arr.filter(function(item){  //filter过滤
            return item.money >= 1000000;  //返回金额大于100万的数据
          });
          updateDom(arr); //重新渲染数组
        }

        //排序
        most_btn.addEventListener("click",mostfn);   //点击查询百万富翁，函数
        function mostfn(){
          arr = arr.sort(function(a,b){  //sort b-a 从大到小
            return b.money - a.money;  //返回money从大到小排序的数据
          });
          updateDom(arr);
        }

        //总额
        total_btn.addEventListener("click",totalfn);  //点击计算总额按钮，函数
        function totalfn(){
          var acc = arr.reduce(function(prev,item,index){
            return (prev += item.money);  //prev初始值为0
          },0);
          var div = document.createElement("div");
          div.innerHTML = `
          <h2><strong>ToTal sum:</strong>${formatMoney(acc)}</h2>
          `;
          main.appendChild(div);
        }

        //格式化金钱函数 写好后 放到需要用该格式的地方
        function formatMoney(money){
          var res = money.toLocaleString();  //把money数字转换成字符串
          return "$" + res + ".00";  //金额前面加$符号，后面加.00
        }

        //侧边导航栏
        var nav_btn = document.querySelector("#toggle");  //获取导航栏按钮元素
        nav_btn.addEventListener("click",function(){   //点击按钮，函数
          document.body.classList.toggle("show_nav");  //给body切换类名--show_nav   toggle是切换的语法
        });
      
    </script>
  </body>
</html>
